<template>
  <div class="app-container">

    <el-form ref="form" :rules="rules" :model="form" label-width="120px" style="width: 600px">
      <h3>新增职位信息</h3>
      <el-tabs tab-position="left" v-model="activePanal" style="height:400px;width:800px">
        <el-tab-pane label="填写职位名称" name="0">
          <el-form-item label="职位名称" prop="positionName">
            <el-autocomplete
              class="inline-input"
              v-model="form.positionName"
              :fetch-suggestions="queryPositionSearch"
              placeholder="请输入"
              style="width: 400px"
              :debounce="600"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item style="margin-top:10px;">
            <el-button v-if="activePanal === '3'" type="primary" :loading="buttonLoading" @click="onSubmit">确认创建
            </el-button>
            <el-button v-else type="primary" :loading="buttonLoading" @click="onNext">下一步</el-button>
            <el-button @click="onCancel">重置全部信息</el-button>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="补充职位信息" name="1">
          <el-form-item label="工作类型" prop="selectedType">
            <el-cascader
              placeholder="请选择"
              v-if="typeOptions"
              v-model="selectedType"
              :options="typeOptions"
              style="width: 400px"
            ></el-cascader>

          </el-form-item>
          <el-form-item label="工作地点" prop="selectedLocation">
            <el-cascader
              placeholder="请选择"
              v-if="locationOptions"
              v-model="selectedLocation"
              :options="locationOptions"
              style="width: 400px"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="工作种类" prop="education">
            <el-select v-model="form.jobNature" placeholder="请选择">
              <el-option label="全职" value="1"/>
              <el-option label="兼职" value="2"/>
              <el-option label="实习" value="3"/>
            </el-select>
          </el-form-item>
          <el-form-item label="学历要求" prop="education">
            <el-select v-model="form.education" placeholder="请选择">
              <el-option label="不限" value="1"/>
              <el-option label="专科" value="2"/>
              <el-option label="本科" value="3"/>
              <el-option label="硕士" value="3"/>
              <el-option label="博士" value="4"/>
            </el-select>
          </el-form-item>
          <el-form-item label="工作经验要求" prop="education">
            <el-select v-model="form.workyear" placeholder="请选择">
              <el-option label="不限" value="1"/>
              <el-option label="应届毕业生" value="2"/>
              <el-option label="1-3年" value="3"/>
              <el-option label="3-5年" value="4"/>
              <el-option label="5-10年" value="5"/>
              <el-option label="10年以上" value="6"/>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-top:10px;">
            <el-button v-if="activePanal === '3'" type="primary" :loading="buttonLoading" @click="onSubmit">确认创建
            </el-button>
            <el-button v-else type="primary" :loading="buttonLoading" @click="onNext">下一步</el-button>
            <el-button @click="onCancel">重置全部信息</el-button>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="填写公司信息" name="2">
          <el-form-item label="公司名称" prop="companyFullname">
            <el-autocomplete
              class="inline-input"
              v-model="form.companyFullname"
              :fetch-suggestions="queryCompanySearch"
              placeholder="请输入"
              style="width: 400px"
              :debounce="600"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="公司规模" prop="education">
            <el-select v-model="form.jobNature" placeholder="请选择">
              <el-option label="少于15人" value="1"/>
              <el-option label="15-50人" value="2"/>
              <el-option label="50-150人" value="3"/>
              <el-option label="150-500人" value="3"/>
              <el-option label="500-2000人" value="4"/>
              <el-option label="2000人以上" value="5"/>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-top:10px;">
            <el-button v-if="activePanal === '3'" type="primary" :loading="buttonLoading" @click="onSubmit">确认创建
            </el-button>
            <el-button v-else type="primary" :loading="buttonLoading" @click="onNext">下一步</el-button>
            <el-button @click="onCancel">重置全部信息</el-button>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="填写薪资信息" name="3">
          <el-form-item label="薪资范围" prop="salary">
            <el-input placeholder="例如：10k-15k" v-model="form.salary"/>
          </el-form-item>
          <el-form-item style="margin-top:10px;">
            <el-button v-if="activePanal === '3'" type="primary" :loading="buttonLoading" @click="onSubmit">确认创建
            </el-button>
            <el-button v-else type="primary" :loading="buttonLoading" @click="onNext">下一步</el-button>
            <el-button @click="onCancel">重置全部信息</el-button>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>


    </el-form>


  </div>
</template>

<script>
  import {add, positionSearch, companySearch, location, type} from '@/api/position'

  export default {
    data() {
      const validateSalary = (rule, value, callback) => {
        if (!value) {
          callback(new Error('薪资范围不能为空'))
        } else if (!/^\d+[Kk]-\d+[Kk]$/.test(value)) {
          callback(new Error('薪资格式为：起始薪资-结束薪资（以k为单位）'))
        } else if (value.match(/\d+/g)[0] > value.match(/\d+/g)[1]) {
          callback(new Error('起始薪资不能大于结束薪资'))
        }

      };
      return {
        form: {
          id: '',
          positionDetailUrl: '',
          positionName: '',
          firstType: '',
          secondType: '',
          thirdType: '',
          publishTime: '',
          salary: '',
          avgSalary: '',
          workyear: '',
          education: '',
          jobNature: '',
          positionAdvantage: '',
          city: '',
          district: '',
          latitude: '',
          longitude: '',
          companyFullname: '',
          companyUrl: '',
          companyLogoUrl: 'https://www.lgstatic.com/thumbnail_120x120/images/logo_default.png',
          companyField: '',
          companySize: '',
          companyLabelList: '',
          companyFamous: 0,
          status: 1
        },
        selectedLocation: [],
        selectedType: [],
        locationOptions: [],
        typeOptions: [],
        activePanal: 0,
        rules: {
          positionName: [{required: true, message: '此字段不能为空', trigger: 'blur'}],
          selectedType: [{required: true, message: '此字段不能为空', trigger: 'blur'}],
          salary: [{required: true, validator: validateSalary, trigger: 'blur'}]

        },

        buttonLoading: false
      }
    },
    watch: {
      selectedLocation: function (val) {
        this.form.city = val[0];
        this.form.district = val[1];
      },
      selectedType: function (val) {
        this.form.firstType = val[0];
        this.form.secondType = val[1];
        this.form.thirdType = val[2];
      }
    },
    created() {
      this.fetchOptions()
    },
    methods: {
      onSubmit() {
        this.$message('添加成功');

        this.$refs.form.validate((valid) => {
          if (valid) {
            //数据预处理
            let salaryArray = this.form.salary.match(/\d+/g);
            this.form.avgSalary = Math.ceil((salaryArray[0] + salaryArray[1]) / 2);

            //开始提交
            this.buttonLoading = true;
            add(this.form).then(response => {
              console.log(response);
              this.buttonLoading = false;
            });
            this.$message('添加成功');
            this.onCancel();
          } else {
            this.$message('填写信息有误，请重试');
            return false;
          }
        });
      },
      onNext() {
        let panalInt = parseInt(this.activePanal);
        this.activePanal = ++panalInt + ''
      },
      onCancel() {
        for (var key in this.form) {
          this.form[key] = '';
        }
        this.activePanal = "0"

      },
      queryPositionSearch(queryString, cb) {
        positionSearch({position: queryString}).then(response => {
          let list = [];
          response.data.forEach(element => {
            let object = {"value": element};
            list.push(object)
          });
          cb(list)
        })
      },
      queryCompanySearch(queryString, cb) {
        companySearch({company: queryString}).then(response => {
          let list = [];
          response.data.forEach(element => {
            let object = {"value": element};
            list.push(object)
          });
          cb(list)
        })
      },
      fetchOptions() {
        location().then(response => {
          this.locationOptions = response.data;
        });
        type().then(response => {
          this.typeOptions = response.data
        })
      },
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>

